<template>
    <div class="login">
        <el-container>
            <el-header height="200px"></el-header>
            <el-main height="80px">
                <div class="welcoming">
                    <p>欢迎来到{{ pageConstant.head }}</p>
                </div>
                <div class="form">
                    <el-form
                            :model="loginForm"
                            class="form-inner"
                            label-position="left"
                            :rules="rules"
                            ref="loginForm"
                            label-width="80px">
                        <el-form-item prop="username" label="用户名">
                            <el-input v-model="loginForm.username"></el-input>
                        </el-form-item>

                        <el-form-item prop="password" label="密码">
                            <el-input show-password v-model="loginForm.password"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button
                                    @click="onSubmit('loginForm')"
                                    style="display: block; margin: auto; width: 100px"
                            >登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import "@/assets/css/login.css";
    import {ElMessage} from "element-plus";
    import Cookie from "/src/plugins/cookies";

    let pageConstant = {
        head: "博客后台管理系统",
    };
    let loginForm = {
        username: "admin",
        password: "admin",
    };
    export default {
        name: "Login",
        data: function () {
            return {
                loginForm,
                pageConstant,
                rules: {
                    username: [
                        {required: true, message: "请输入用户名", trigger: "blur"},
                        {
                            min: 3,
                            max: 5,
                            message: "用户名长度在3到5个字符",
                            trigger: "blur",
                        },
                    ],
                    password: [
                        {required: true, message: "请输入密码", trigger: "blur"},
                        {min: 5, message: "密码长度在5个字符以上", trigger: "blur"},
                    ],
                },
            };
        },
        methods: {
            onSubmit: function (formName) {
                let validOk = false;
                this.$refs[formName].validate((valid, message) => {
                    validOk = valid;
                    if (!valid) {
                        ElMessage.error(JSON.stringify(Object.values(message)[0][0].message));
                        return false;
                    }
                });
                if (validOk) {
                    this.$http({
                        url: '/user/login',
                        method: 'POST',
                        params: this.loginForm
                    }).then(res => {
                        console.log("登录成功")
                        let session = res.data.data.session;
                        Cookie.setCookie('JSESSIONID', session.id, session.expire);
                        this.$router.push('/root')
                    })
                }
            },

        },
    };
</script>

<style scoped></style>
